<template>
	<view class="review-box page-box">
		<view style="height: 120rpx;">
			<u-navbar bgColor="transparent" height="60">
				<view class="u-nav-slot" slot="left">
					<image class="image1" src="@/static/images/common/fanhui-new.png" @click="goBack" />
				</view>
				<view class="u-nav-slot-center flex-align-center" slot="center">
					<view class="tab-box flex-between">
						<view class="tab-item flex-center" :class="current == item.id ? 'current':''"
							v-for="item in tabList" :key="item.id" @click="changeTab(item.id)">
							{{item.name}}
						</view>
					</view>
					<view class="total-box flex-center">
						<view class="tab-item flex-center" @click="changeTab(4)" :class="current == 4 ? 'current':''">
							课程报告
						</view>
					</view>
				</view>
				<view class="u-nav-slot-right" slot="right"></view>
			</u-navbar>
		</view>
		<view class="contents">
			<!-- 每日报告 -->
			<block v-if="current === 0">
				<dayReport></dayReport>
			</block>
			<!-- 每周报告 -->
			<block v-if="current === 1">
				<weekReport></weekReport>
			</block>
			<!-- 每月报告 -->
			<block v-if="current === 2">
				<weekReport></weekReport>
			</block>
			<!-- 汇总报告 -->
			<block v-if="current === 3">
				<collectReport></collectReport>
			</block>
			<!-- 课程报告 -->
			<block v-if="current === 4">
				<courseReport></courseReport>
			</block>

		</view>


	</view>
</template>

<script>
	import dayReport from './components/dayReport/dayReport.vue';
	import weekReport from './components/weekReport/weekReport.vue';
	import collectReport from './components/collectReport/collectReport.vue';
	import courseReport from './components/courseReport/courseReport.vue';
	export default {
		components: {
			dayReport,
			weekReport,
			collectReport,
			courseReport
		},
		data() {
			return {
				current: 0,
				tabList: [{
						name: '每日报告',
						id: 0,

					},
					{
						name: '每周报告',
						id: 1,

					},
					{
						name: '每月报告',
						id: 2,

					},
					{
						name: '汇总报告',
						id: 3,

					},
					// {
					// 	name: '课程报告',
					// 	id: 4,
					// }
				],

			};
		},
		methods: {
			// 展开日历
			onDayClick(data) {
				let choose = data.date //用户点中的数据
				// if (this.actDay.includes(choose)) { //如果用户点击的日期已经存在
				// 	// 移除元素下标
				// 	const index = this.actDay.indexOf(choose);
				// 	//删除用户点击的日期
				// 	this.actDay.splice(index, 1)
				// } else if (this.chooseDay.includes(choose)) { //判断是否已经被投标
				// 	uni.showToast({
				// 		title: "这个日期已经被投标了",
				// 		icon: "none"
				// 	})
				// } else {
				// 	//添加用户点击的日期
				// 	this.actDay.push(choose)
				// }
			},
			change(e) {
				console.log("e:", e);
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeTab(val) {
				console.log(val);
				this.current = val;
			}
		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: #505CFE;
		position: relative;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	::v-deep .u-navbar__content__left {
		margin: 0 33rpx !important;
	}

	.u-nav-slot {
		.image1 {
			width: px_2_vw(52);
			height: px_2_vw(63);
		}
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #B0B0B0;
		font-size: px_2_vw(32);

		.tab-box {
			width: px_2_vw(907);
			height: px_2_vw(93);
			background: #C5C5C5;
			color: #36475C;
			border-radius: 21rpx;
			padding: 0 7rpx;





		}

		.tab-item {
			width: px_2_vw(256);
			height: px_2_vw(80);
			border-radius: 17rpx;
		}

		.current {
			width: px_2_vw(256) !important;
			height: px_2_vw(80) !important;
			border-radius: 17rpx !important;
			border-radius: 5px !important;
			background: linear-gradient(131.77deg, #F8E086 0%, #F7A336 100%) !important;
			color: #951E0B !important;
		}

		.total-box {
			width: px_2_vw(256);
			height: px_2_vw(93);
			border-radius: 21rpx;
			background: #C5C5C5;
			color: #36475C;
			margin-left: 13rpx;
			padding: 0 7rpx;
		}


	}

	.contents {
		flex: 1;
		border-radius: 65rpx;
		margin: 4rpx 54rpx 33rpx 54rpx;
	}
</style>